<template>
  <div>
    <el-card class="box-card">
      <div style="display: flex">
        <div class="gun"></div>
        <div class="title">
          日前预测曲线
        </div>
      </div>
      <div class="text item">
        <div id="capacity"></div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div style="display: flex">
        <div class="gun"></div>
        <div class="title">
          影响因素曲线
        </div>
      </div>
      <div class="text item">
        <div id="capacity03"></div>
      </div>
      <div class="text item">
        <div id="capacity04"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
    };
  },
  created() { },
  mounted() {
    this.init();
    this.init03();
    this.init04()
  },
  methods: {
    init() {
      var myChart = echarts.init(document.getElementById("capacity"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["可用负荷上限", "可用负荷下限", "预测负荷曲线"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "可用负荷上限",
            type: "line",
            smooth: true,
            data: [234, 934, 233, 134, 129, 230, 1020],
          },
          {
            name: "可用负荷下限",
            type: "line",
            smooth: true,
            data: [820, 932, 901, 934, 120, 1030, 1320],
          },
          {
            name: "预测负荷曲线",
            type: "line",
            smooth: true,
            data: [150, 232, 201, 154, 190, 330, 1120],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    init03() {
      var myChart = echarts.init(document.getElementById("capacity03"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["气温"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "气温",
            type: "line",
            smooth: true,
            data: [820, 822, 341, 934, 1220, 1330, 1320],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    init04() {
      var myChart = echarts.init(document.getElementById("capacity04"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["气象"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "气象",
            type: "line",
            smooth: true,
            data: [820, 822, 341, 934, 1220, 1330, 1320],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  color: #333333;
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
  margin-top: -2px;
}

.gun {
  width: 4px;
  height: 20px;
  background: #6b5af4;
}

.wrap_inline {
  background: #fff;
}

.box-card {
  margin: 20px;
}

#capacity {
  width: 100%;
  height: 40vh;
}

#capacity03 {
  width: 100%;
  height: 40vh;
}

#capacity04 {
  width: 100%;
  height: 40vh;
}

.wrap_inline {
  padding: 14px 5px 0px 5px;
}

.wrap_inline .input_inner {
  width: 120px;
}
</style>